<template>
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
      size="default" @submit.prevent>
      <el-row class="box">
        <el-col :span="12" class="grid-cell">
          <el-form-item label="昵称" prop="userName">
            <el-input v-model="formData.userName" type="text"  clearable ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="性别" prop="gender">
            <el-select v-model="formData.gender" class="full-width-input" clearable>
              <el-option v-for="(item, index) in genderOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="生日" prop="birthday">
            <el-date-picker v-model="formData.birthday" type="date" class="full-width-input" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="grid-cell">
          <el-form-item label="签名" prop="signature">
            <el-input v-model="formData.signature" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="职业" prop="occupation">
            <el-input v-model="formData.occupation" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="公司所在地" prop="firm">
            <el-input v-model="formData.firm" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="故乡" prop="hometown">
            <el-input v-model="formData.hometown" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="grid-cell">
          <el-form-item label="个人说明" prop="personalInstructions">
            <el-input v-model="formData.personalInstructions" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <div class="static-content-item">
            <el-button @click="submit">确认</el-button>
          </div>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <div class="static-content-item">
            <el-button @click="getmain">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    
  </template>
  
  <script>
    import {
      defineComponent,
      toRefs,
      reactive,
      getCurrentInstance
    }
    from 'vue'
    export default defineComponent({
      components: {},
      props: {},
      setup() {
        const state = reactive({
          formData: {
            userUuid:"",
            userName: "",
            gender: "",
            birthday: null,
            signature: "",
            occupation: "",
            firm: "",
            hometown: "",
            phone: "",
            email: "",
            personalInstructions: "",
          },
          rules: {},
          genderOptions: [{
            "label": "男",
            "value": '1'
          }, {
            "label": "女",
            "value": '2'
          }],
        })
        const instance = getCurrentInstance()
        const submitForm = () => {
          instance.proxy.$refs['vForm'].validate(valid => {
            if (!valid) return
            //TODO: 提交表单
          })
        }
        const resetForm = () => {
          instance.proxy.$refs['vForm'].resetFields()
        }
        return {
          ...toRefs(state),
          submitForm,
          resetForm
        }
      },
      methods: {
        submit(){
              var that = this;
              this.formData.userUuid = sessionStorage.getItem('token1');
             if(this.formData.userUuid!=null){
              window.sessionStorage.setItem('token',this.formData)
              window.http.post('/api/user/revise',this.formData).then(res => {
              console.info(JSON.stringify(res));
                var data = res.data;
                if(data.success){
                  that.$message.success('修改成功');
                }else{
                  that.$message.error('修改失败');
                } 
              })
              .catch(function(error){
                that.$message.error('服务器异常');
              })
             }
          },
          queryUser(){
            var that = this;
            var userUuid = sessionStorage.getItem('token1');
            window.http.post('/api/user/queryUser',{userUuid:userUuid}).then(res => {
                console.info(JSON.stringify(res));
                var data = res.data;
                if(data.length > 0){
                  that.formData=data[0];
                }
                
              })
              .catch(function(error){
                that.$message.error('服务器异常');
              })
          },
          getmain(){
            this.$router.push({
                 name:"homepage"
              });
          }
      },
      mounted(){
        this.queryUser();
      }
    })
    
  </script>
  
  <style lang="scss">
    .el-input-number.full-width-input,
    .el-cascader.full-width-input {
      width: 100% !important;
    }
    
    .el-form-item--medium {
      .el-radio {
        line-height: 36px !important;
      }
      
      .el-rate {
        margin-top: 8px;
      }
    }
    
    .el-form-item--small {
      .el-radio {
        line-height: 32px !important;
      }
      
      .el-rate {
        margin-top: 6px;
      }
    }
    
    .el-form-item--mini {
      .el-radio {
        line-height: 28px !important;
      }
      
      .el-rate {
        margin-top: 4px;
      }
    }
    
    .clear-fix:before,
    .clear-fix:after {
      display: table;
      content: "";
    }
    
    .clear-fix:after {
      clear: both;
    }
    
    .float-right {
      float: right;
    }
    
  </style>
  
  <style lang="scss" scoped>
    div.table-container {
      table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
  
        td.table-cell {
          display: table-cell;
          height: 36px;
          border: 1px solid #e1e2e3;
        }
      }
    }
    
    div.tab-container {}
    
    .label-left-align :deep(.el-form-item__label) {
      text-align: left;
    }
    
    .label-center-align :deep(.el-form-item__label) {
      text-align: center;
    }
    
    .label-right-align :deep(.el-form-item__label) {
      text-align: right;
    }
    
    .custom-label {}
    
    .static-content-item {
      min-height: 20px;
      display: flex;
      align-items: center;
      margin-left: 169px;
      :deep(.el-divider--horizontal) {
        margin: 0;
      }
    }
    .box{
      width: 800px ;
      margin-left: 350px ;
      margin-top: 119px ;
    }
    .el-row {
  
      height: 500px;
    }
  </style>